<template>
  <div>
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>常州二院</el-breadcrumb-item>
        <el-breadcrumb-item>查询预约</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-card class="box-card">
      <el-row>
        <el-form ref="searchForm" :model="searchForm" :inline="true">
          <el-form-item label="医生">
            <el-select v-model="searchForm.drCode" placeholder="请选择医生" clearable>
              <el-option v-for="doctor in doctorSelList" :key="doctor.doctorCode" :label="doctor.doctorName" :value="doctor.doctorCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker v-model="searchForm.date" type="daterange" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期" value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-button type="primary" @click="searchDoctor">查询</el-button>
        </el-form>
      </el-row>

      <el-row :gutter="20" class="box-card">
        <el-col
          v-for="(doctor, index) in doctorList"
          :key="index"
          :span="6"
        >
          <el-card class="fixed-height margin-top-10 margin-left-10">
            <!-- 图片部分 -->
            <img v-if="doctor.imageUrl"
                 :src="'https://pay.czey.com:8443'+doctor.imageUrl"
                 class="image"
                 alt=""
            >

            <div class="content">
              <!-- 标题部分 -->
              <h3 class="title">{{ doctor.doctorName }}-{{ doctor.drProTechDuty }}</h3>

              <!-- 详细描述 -->
              <div class="description">
                <div class="price" v-for="(item, index) in doctor.drScheduList">
                  {{ item.scheduleDate }}-{{ item.timeFlag }}
                  <el-button type="primary" size="small" @click="register(item.scheduleDate, doctor.drCode,doctor.doctorName)">立即预定</el-button>
                </div>
              </div>

              <!-- 底部操作区 -->
              <div class="bottom">
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </el-card>


  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  name: 'Reserve',
  data() {
    return {
      searchForm: {
        date: [],
        drCode: '',
        scheduleBegDate: '',
        scheduleEndDate: ''
      },
      doctorList: [],
      doctorSelList:[]
    }
  },
  created() {
    this.queryDoctor();
    this.searchForm.date = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
  },
  methods: {
    searchDoctor() {
      if(this.searchForm.date && this.searchForm.date.length >0 ){
        this.searchForm.scheduleBegDate = this.searchForm.date[0];
        this.searchForm.scheduleEndDate = this.searchForm.date[1];
      }
      this.$http.post("/ey/getSourceInfo", this.searchForm).then(response => {
        this.doctorList = response.data;
      }).catch(error => {
      })
    },
    queryDoctor() {
      this.$http.post("/ey/queryDoctor", this.searchForm).then(response => {
        this.doctorSelList = response.data;
      }).catch(error => {})
    },
    register(scheduleDate, drCode,doctorName) {
      this.$http.post("/ey/saveSchedule", {
        doctorCode: drCode,
        scheduleDate: scheduleDate,
        doctorName: doctorName,
      }).then(response => {
        this.$message.success("保存预约信息成功");
      }).catch(error => {
      })
    }
  },
  computed: {
  }
}

</script>

<style scoped lang="less">

.box-card {
  margin-top: 20px;
}


.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.content {
  padding: 14px;
}

.title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 14px;
  overflow: hidden;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.price {
  font-size: 18px;
  color: #f56c6c;
  font-weight: bold;
  margin-top: 20px;
}

.fixed-height {
  height: 500px; /* 设置为300px高 */
}

.margin-top-10 {
  margin-top: 10px;
}

.margin-left-10 {
  margin-left: 10px;
}
</style>

